<template>
  <el-container id="message-main">
    <el-aside id="message-aside"
      width="141px"
      >
      <el-menu
        :default-active="currentActive"
        @open="handleOpen"
        :router="true"
        class="message-menu">
        <el-menu-item index="/message/template">
          <template slot="title">
            <i class="el-icon-service"></i>
            <span>模版消息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/message/customer">
          <template slot="title">
            <i class="el-icon-service"></i>
            <span>客服消息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/message/subscribe">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>订阅脚本</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>

</template>
<script>
import CONSTANT from '../../constant/common';
import cookie from '../../lib/cookie';

export default {
  data() {
    return {
      // currentActive: '/message/customer',
      userRole: cookie(CONSTANT.COOKIE_USER_ROLE),
    };
  },
  computed: {
    currentActive() {
      return this.$route.path || '/message/template';
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  beforeMount() {
    const localWoa = localStorage.getItem(CONSTANT.STORAGE_LOCAL_WOA) ?
      JSON.parse(localStorage.getItem(CONSTANT.STORAGE_LOCAL_WOA)) : {};
    const appId = this.$store.state.woa.currentWoa.appId || localWoa.appId;
    console.log('before mouned');
    if (!appId) {
      if (this.userRole === 'USER') {
        this.$message.warning('当前账号无公众号，请联系管理员绑定公众号');
        this.$router.replace('/home');
      } else {
        this.$message.warning('您暂未绑定公众号，现在跳转到公众号绑定');
        this.$router.replace('/wechat-offical-account');
      }
    }
  },
};
</script>
<style lang="less" scoped>
#message-main {
  width: 100%;
  #message-aside {
    height: 500px;
    .message-menu {
      height: 500px;
    }
  }
}
</style>

